<template>
  <div>
    <el-card class="member-box-card">
      <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect">
        <template slot-scope="{ item }">
          <div class="name">{{ item.value }} </div>
          <span class="addr">{{ item.department }} </span>
          <span class="addr">{{ item.provider }}</span>
        </template>
      </el-autocomplete>
      <el-table id="member-table" ref="memberTable" :key="itemKey" v-loading="loading"  border height="700"
                style="width: 100%" :data="tableData" max-height="450">
        <el-table-column prop="id" label="序号" fixed width="60"/>
        <el-table-column prop="acceptId" label="编号/流水号" width="100"/>
        <el-table-column prop="name" label="物料名称" width="140"/>
        <el-table-column prop="specification" label="规格型号" width="120"/>
        <el-table-column prop="unit" label="计量单位" width="80"/>
        <el-table-column prop="type" label="物料类型" width="80"/>
        <el-table-column prop="billNum" label="账单数量" width="60"/>
        <el-table-column prop="price" label="单价" width="90"/>
        <el-table-column prop="tax" label="税率" width="60"/>
        <el-table-column prop="yesNum" label="合格数量" width="60"/>
        <el-table-column prop="noNum" label="不合格数量" width="60"/>
        <el-table-column prop="position" label="存放位置" width="120"/>
        <el-table-column prop="remark" label="备注" width="120"/>
        <el-table-column align="right" fixed="right" width="150">
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleInsert(scope.$index, scope.row)"
            >添加</el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--编辑弹窗-->
    <el-dialog title="修改验收信息" :visible.sync="editFormVisible" :before-close="handleEditClose" width="40%">
      <el-form class="action-form" :model="updForm" label-width="100px">

        <el-form-item label="流水号">
          <el-input v-model="updForm.acceptId" :disabled="true" />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="updForm.name" :disabled="true"/>
        </el-form-item>
        <el-form-item label="账单数量">
          <el-input v-model="updForm.billNum" />
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="updForm.price" />
        </el-form-item>
        <el-form-item label="税率">
          <el-input v-model="updForm.tax" />
        </el-form-item>
        <el-form-item label="合格数量">
          <el-input v-model="updForm.yesNum" />
        </el-form-item>
        <el-form-item label="不合格数量">
          <el-input v-model="updForm.noNum" />
        </el-form-item>
        <el-form-item label="存放位置">
          <el-input v-model="updForm.position" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="updForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFormCancel()">取 消</el-button>
        <el-button type="primary" @click="updFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加弹窗-->
    <el-dialog title="新建验收" :visible.sync="insFormVisible" :before-close="handleInsClose" width="40%">
      <el-form class="action-form" :model="insForm" label-width="100px">

        <el-form-item label="物品名称">
          <el-autocomplete
            v-model="state1"
            :fetch-suggestions="querySearchAsync1"
            placeholder="请输入内容"
            @select="handleSelect1"
          ></el-autocomplete>
        </el-form-item>

        <el-form-item label="规格型号">
          <el-input v-model="insForm.insspecification" />
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="insForm.insunit" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="insForm.instype" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质量">
          <el-radio v-model="insForm.insyesorno" label="合格">合格</el-radio>
          <el-radio v-model="insForm.insyesorno" label="不合格">不合格</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insFormCancel()">取 消</el-button>
        <el-button type="primary" @click="insFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {selectAll, selectByNot, selectByStatus, addAccept, editAccept, editStatus} from '@/api/entrywarehouse/accept-inform'
  import {addGood, editGood, removeGood, selectById} from '@/api/entrywarehouse/accept-goods'
  import { getToken } from '@/utils/auth'
  import { allmaterials } from '../../../api/entrywarehouse/base-information'

  export default {
    name: 'index',
    data() {
      return {
        searchDatas: [],//初始时搜索框预加载数据
        nameDatas: [], //新验收物品时预加载物品名称
        state: '',
        state1: '',
        timeout:  null,
        tableData: [],//选中acceptid后table的加载数据
        options: [
          {
             value: '普通',
              label: '普通'
          }, {
          value: '特殊一',
          label: '特殊一'
          }, {
          value: '特殊二',
          label: '特殊二'
        }
        ],
        itemKey: '',
        loading: false,
        editFormVisible: false,
        insFormVisible: false,
        selectValue: '',
        updForm: {
          id: '',
          index: '',
          acceptId: '',
          name: '',
          specification: '',
          unit: '',
          type: '',
          billNum: '',
          price: '',
          tax: '',
          yesNum: '',
          noNum: '',
          shortage: '',
          surplus: '',
          position: '',
          remark: ''
        },
        insForm: {
          insname: '',
          insspecification: '',
          insunit: '',
          instype: '',
          insyesorno: ''
        },
        headers: {
          Authorization: getToken()
        }
      }
    },

    mounted() {
      this.init()
    },
    methods: {
      init() {
        selectByNot().then((response) => {
          this.searchDatas = response.data
        })

      },
      querySearchAsync(queryString, cb) {
        var searchDatas = this.searchDatas;
        var results = queryString ? searchDatas.filter(this.createStateFilter(queryString)) : searchDatas;
        var results1 = []
        for(let i = 0; i< results.length ; i++){
          results1.push({'value': results[i].acceptId,
            'department': results[i].department,'provider': results[i].provider
          })
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results1);
        }, 2000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.acceptId.toLowerCase().indexOf(queryString.toLowerCase()) > -1 );
        };
      },
      handleSelect(item) {
        selectById(item.value).then((response) => {
          this.selectValue = item.value
          this.tableData = response.data
          this.itemKey = Math.random()
        })
      },

      querySearchAsync1(queryString, cb) {
        var nameDatas = this.nameDatas;
        var results = queryString ? nameDatas.filter(this.createStateFilter1(queryString)) : nameDatas;
        var results1 = []
        for(let i = 0; i< results.length ; i++){
          results1.push({'value': results[i].name, 'specification': results[i].specification,
            'unit': results[i].unit, 'type': results[i].type
          })
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results1);
        }, 1000 * Math.random());
      },
      createStateFilter1(queryString) {

        return (state1) => {
          console.log(state1);
          return (state1.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect1(item) {
        this.insForm.insname = item.value
        this.insForm.insspecification = item.specification
        this.insForm.insunit = item.unit
        this.insForm.instype = item.type
      },

      handleEdit(index, row) {
        this.editFormVisible = true
        this.updForm.index = index
        this.updForm.id = row.id
        this.updForm.acceptId = row.acceptId
        this.updForm.name = row.name
        this.updForm.specification = row.specification
        this.updForm.unit = row.unit
        this.updForm.type = row.type
        this.updForm.billNum = row.billNum
        this.updForm.price = row.price
        this.updForm.tax = row.tax
        this.updForm.yesNum = row.yesNum
        this.updForm.noNum = row.noNum
        this.updForm.shortage = ''
        this.updForm.surplus = ''
        this.updForm.position = row.position
        this.updForm.remark = row.remark

      },
      updFormConfirm() {
        this.editFormVisible = false
        editGood(
          this.updForm.id,
          this.updForm.acceptId,
          this.updForm.name,
          this.updForm.specification,
          this.updForm.unit,
          this.updForm.type,
          this.updForm.billNum,
          this.updForm.price,
          this.updForm.tax,
          this.updForm.yesNum,
          this.updForm.noNum,
          this.updForm.shortage,
          this.updForm.surplus,
          this.updForm.position,
          this.updForm.remark,
        ).then((response) => {
          this.$message.success(response.message)
          this.loading = true
          selectById(this.selectValue).then((response) => {
            this.tableData = response.data
            this.loading = false
            this.itemKey = Math.random()
          })
          this.updForm.id = ''
          this.updForm.acceptId = ''
          this.updForm.name = ''
          this.updForm.specification = ''
          this.updForm.unit = ''
          this.updForm.type = ''
          this.updForm.billNum = ''
          this.updForm.price = ''
          this.updForm.tax = ''
          this.updForm.yesNum = ''
          this.updForm.noNum =''
          this.updForm.shortage = ''
          this.updForm.surplus =''
          this.updForm.position = ''
          this.updForm.remark = ''
        }).catch((error) => {
          console.log(error)
        })
      },
      updFormCancel() {
        this.editFormVisible = false
        this.updForm.id = ''
        this.updForm.acceptId = ''
        this.updForm.name = ''
        this.updForm.specification = ''
        this.updForm.unit = ''
        this.updForm.type = ''
        this.updForm.billNum = ''
        this.updForm.price = ''
        this.updForm.tax = ''
        this.updForm.yesNum = ''
        this.updForm.noNum =''
        this.updForm.shortage = ''
        this.updForm.surplus =''
        this.updForm.position = ''
        this.updForm.remark = ''
      },
      handleEditClose() {
        this.editFormVisible = false
        this.updForm.id = ''
        this.updForm.acceptId = ''
        this.updForm.name = ''
        this.updForm.specification = ''
        this.updForm.unit = ''
        this.updForm.type = ''
        this.updForm.billNum = ''
        this.updForm.price = ''
        this.updForm.tax = ''
        this.updForm.yesNum = ''
        this.updForm.noNum =''
        this.updForm.shortage = ''
        this.updForm.surplus =''
        this.updForm.position = ''
        this.updForm.remark = ''
      },

      handleInsert(index, row) {
        this.insFormVisible = true
        this.insForm.insyesorno = '合格'
        this.insForm.instype = '普通'
        allmaterials().then((response) => {
          this.nameDatas = response.data
        })
      },
      insFormConfirm() {
        //console.log(this.selectValue);
        //debugger
        if (this.insForm.insname === '' || this.insForm.insspecification === '' ||
          this.insForm.insunit === '' || this.insForm.instype === '' || this.insForm.insyesorno === '') {
          this.$message.error('信息不能为空')
        } else {
          addGood(this.selectValue, this.insForm.insname, this.insForm.insspecification, this.insForm.insunit,
            this.insForm.instype, this.insForm.insyesorno).then(response => {
            this.$message.success('添加成功')
            this.insFormVisible = false
            this.loading = true
            selectById(this.selectValue).then((response) => {
              this.tableData = response.data
              this.loading = false
              this.itemKey = Math.random()
            })
            this.state1 = ''
            this.insForm.insname = ''
            this.insForm.insspecification = ''
            this.insForm.insunit = ''
            this.insForm.instype = ''
            this.insForm.insyesorno = ''
          })
        }
      },
      insFormCancel() {
        this.insFormVisible = false
        this.state1 = ''
        this.insForm.insname = ''
        this.insForm.insspecification = ''
        this.insForm.insunit = ''
        this.insForm.instype = ''
        this.insForm.insyesorno = ''
      },
      handleInsClose() {
        this.insFormVisible = false
        this.state1 = ''
        this.insForm.insname = ''
        this.insForm.insspecification = ''
        this.insForm.insunit = ''
        this.insForm.instype = ''
        this.insForm.insyesorno = ''
      },

      handleDelete(index, row) {
        this.$confirm('此操作将删除物料信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeGood(this.tableData[index].id).then((response) => {
            this.$message.success(response.message)
            this.loading = true
            selectById(this.selectValue).then((response) => {
              this.tableData = response.data
              this.loading = false
              this.itemKey = Math.random()
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
    }
  }
</script>

<style>
  .my-autocomplete {
      line-height: normal;
      padding: 7px;
  }
  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .addr {
    font-size: 10px;
    color: #b4b4b4;
  }
  .highlighted .addr {
    color: #ddd;
  }

  .member-box-card {
    width: 95%;
    margin: 20px auto;
  }
  #input-field {
    width: 200px;
    display: inline;
  }
  #member-table {
    margin-top: 5px;
  }
  .action-form {
    width: 400px;
  }


</style>
